﻿@page "/components/loading"

<PageHeader Title="Loading 加载中">在网络较慢或数据较多时，表示数据正在加载的状态。</PageHeader>
<Alert Theme="Theme.Warning">支持双向绑定</Alert>
<Example Title="图标加载">
    <Description>加载过程中只有图标显示。适用于打开页面或操作完成后模块内等待刷新的加载场景。</Description>
    <RunContent>
        <Loading />
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```html
<Loading />
```
")
    </CodeContent>
</Example>

<Example Title="文字加载">
    <Description>加载过程中有文字显示。适用于打开页面或操作完成后模块内等待刷新的加载场景。</Description>
    <RunContent>
        <Loading TextOnly>加载中...</Loading>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```html
<Loading TextOnly>加载中...</Loading>
```
")
    </CodeContent>
</Example>

<Example Title="文字和图标共同显示加载">
    <Description>加载过程中有文字和图标共同显示。适用于打开页面或操作完成后页面内等待刷新的加载场景。</Description>
    <RunContent>
        <Loading>加载中...</Loading>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```html
<Loading>加载中...</Loading>
```
")
    </CodeContent>
</Example>
<Example Title="不同尺寸的加载">
    <Description>小尺寸适用于组件内加载场景，中尺寸适用于容器如卡片、表格等区域的加载场景，大尺寸适用于页面全屏加载场景。</Description>
    <RunContent>
        <Space Vertical>
            <SpaceItem>
                <Loading Size="Size.Small">加载中（小）...</Loading>
            </SpaceItem>
            <SpaceItem>
                <Loading>加载中（中）...</Loading>
            </SpaceItem>
            <SpaceItem>
                <Loading Size="Size.Large">加载中（大）...</Loading>
            </SpaceItem>
            <SpaceItem>
        <Loading AdditionalStyle="font-size:46px">加载中（自定义）...</Loading>
            </SpaceItem>
        </Space>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```html
<Loading Size=""Size.Small"">加载中（小）...</Loading>
<Loading>加载中（中）...</Loading>
<Loading Size=""Size.Large"">加载中（大）...</Loading>
<Loading AdditionalStyle=""font-size:78px"">加载中（自定义）...</Loading>
```
")
    </CodeContent>
</Example>
<Example Title="有包裹的加载">
    <Description>@Code.Create("用 `<LoadinContainer>...</LoadingContainer>` 来包裹 `<Loading />` 组件和内容")</Description>
    <RunContent>
        <LoadingContainer AdditionalStyle="width:120px">
            <p>这是要加载的内容</p>
            <p>这是要加载的内容</p>
            <p>这是要加载的内容</p>
            <p>这是要加载的内容</p>
            <p>这是要加载的内容</p>

            <Loading Overlay/>
        </LoadingContainer>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```html
<LoadingContainer>
    <p>这是要加载的内容</p>
    <p>这是要加载的内容</p>
    <p>这是要加载的内容</p>
    <p>这是要加载的内容</p>
    <p>这是要加载的内容</p>

    <Loading Overlay/>
</LoadingContainer>
```
")
    </CodeContent>
</Example>
<Example Title="全屏加载">
    <Description>全屏展示加载状态，阻止用户操作。</Description>
    <RunContent>
        <Button Theme="Theme.Primary" OnClick="ShowFullScreen">点击加载全屏</Button>
        
        <Loading FullScreen Overlay @bind-Visible="IsLoading">加载中</Loading>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```html
<Loading FullScreen Overlay @bind-Visible=""IsLoading"">加载中</Loading>
```
")
    </CodeContent>
</Example>

@code{
    bool IsLoading{ get; set; }

    Timer timer;

    void ShowFullScreen()
    {
        IsLoading = true;
        timer = new(async state =>
        {
            IsLoading = false;
            await InvokeAsync(StateHasChanged);
        }, null,5000, 5000);
        
    }
}